<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的名片夹 - 名片管理系统</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.6.0/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/webjars/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/business-style.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Nunito', 'Microsoft YaHei', sans-serif;
        }
        .folder-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
        }
        .folder-card {
            animation: fadeIn 0.5s ease-out;
            animation-fill-mode: both;
        }
        .folder-card:nth-child(1) { animation-delay: 0.1s; }
        .folder-card:nth-child(2) { animation-delay: 0.2s; }
        .folder-card:nth-child(3) { animation-delay: 0.3s; }
        .folder-card:nth-child(4) { animation-delay: 0.4s; }
        .folder-card:nth-child(5) { animation-delay: 0.5s; }
        .folder-card:nth-child(6) { animation-delay: 0.6s; }
    </style>
</head>
<body>
    <div th:replace="fragments/header :: header"></div>

    <!-- Toast消息容器 -->
    <div class="toast-container"></div>

    <div class="container mt-4">
        <div class="row mb-4 align-items-center">
            <div class="col-md-8">
                <h2 class="d-flex align-items-center">
                    <i class="fa fa-address-card-o mr-2" style="color: var(--secondary-color);"></i>
                    <span class="font-weight-bold">我的名片夹</span>
                </h2>
            </div>
            <div class="col-md-4 text-right">
                <button id="createFolderBtn" class="btn btn-primary btn-icon">
                    <i class="fa fa-plus"></i> 创建名片夹
                </button>
                <a href="/user/businesscard/recycle" class="btn btn-secondary btn-icon ml-2">
                    <i class="fa fa-trash"></i> 回收站
                </a>
            </div>
        </div>

        <div id="folderContainer">
            <!-- 名片夹列表 -->
            <div th:if="${folders.empty}" class="empty-state">
                <div class="empty-state-icon">
                    <i class="fa fa-folder-o"></i>
                </div>
                <p class="empty-state-text">您还没有创建名片夹，点击"创建名片夹"按钮开始使用</p>
                <button class="btn btn-primary btn-icon mt-3" id="emptyStateCreateBtn">
                    <i class="fa fa-plus"></i> 创建第一个名片夹
                </button>
            </div>
            
            <div th:if="${!folders.empty}" class="folder-grid">
                <div th:each="folder : ${folders}" class="folder-card-wrapper">
                    <div class="card folder-card" th:onclick="|window.location.href='/user/businesscard/folder/${folder.id}'|">
                        <div class="card-body text-center">
                            <i class="fa fa-folder-o folder-icon"></i>
                            <h5 class="folder-name" th:text="${folder.folderName}">名片夹名称</h5>
                            <p class="text-muted">
                                <span class="badge badge-pill badge-light" th:text="${folder.cardCount} + ' 张名片'">0 张名片</span>
                            </p>
                            
                            <div class="action-buttons">
                                <button class="btn btn-outline-secondary edit-folder" 
                                        th:data-id="${folder.id}" 
                                        th:data-name="${folder.folderName}" 
                                        onclick="event.stopPropagation();" title="编辑名片夹">
                                    <i class="fa fa-pencil"></i>
                                </button>
                                <button class="btn btn-outline-danger delete-folder" 
                                        th:data-id="${folder.id}" 
                                        th:data-name="${folder.folderName}" 
                                        onclick="event.stopPropagation();" title="删除名片夹">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 创建名片夹模态框 -->
    <div class="modal fade" id="createFolderModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fa fa-folder-o mr-2" style="color: var(--secondary-color);"></i>
                        创建名片夹
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="folderForm">
                        <div class="form-group">
                            <label for="folderName">名片夹名称</label>
                            <input type="text" class="form-control" id="folderName" name="folderName" required 
                                   placeholder="请输入名片夹名称" autocomplete="off">
                            <small class="form-text text-muted">为您的名片夹取一个有意义的名称，例如：客户、供应商、合作伙伴等</small>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveFolder">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 重命名名片夹模态框 -->
    <div class="modal fade" id="renameFolderModal" tabindex="-1" role="dialog" aria-labelledby="renameFolderModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="renameFolderModalLabel">重命名名片夹</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="renameFolderForm">
                        <input type="hidden" id="renameFolderId">
                        <div class="form-group">
                            <label for="newFolderName">名片夹名称</label>
                            <input type="text" class="form-control" id="newFolderName" name="newFolderName" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="submitRenameFolder">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteFolderModal" tabindex="-1" role="dialog" aria-labelledby="deleteFolderModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteFolderModalLabel">删除名片夹</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>您确定要删除名片夹 "<span id="deleteFolderName"></span>" 吗？</p>
                    <p class="text-muted">名片夹及其中的名片将被移至回收站，您可以稍后恢复。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteFolder">删除</button>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.6.0/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/businesscard.js}"></script>
    <script>
        $(document).ready(function() {
            // 创建名片夹
            $("#createFolderBtn, #emptyStateCreateBtn").click(function() {
                $("#folderName").val(''); // 清空输入框
                $("#createFolderModal").modal("show");
            });

            $("#saveFolder").click(function() {
                const folderName = $("#folderName").val().trim();

                if (!folderName) {
                    showToast("error", "<i class='fa fa-times-circle toast-icon'></i>请输入名片夹名称");
                    return;
                }

                $.ajax({
                    url: "/user/businesscard/folder/create",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({
                        folderName: folderName
                    }),
                    success: function(response) {
                        $("#createFolderModal").modal("hide");
                        if (response.success) {
                            showToast("success", "<i class='fa fa-check-circle toast-icon'></i>创建名片夹成功");
                            setTimeout(function() {
                                location.reload();
                            }, 1500);
                        } else {
                            showToast("error", "<i class='fa fa-times-circle toast-icon'></i>创建名片夹失败：" + response.message);
                        }
                    },
                    error: function() {
                        $("#createFolderModal").modal("hide");
                        showToast("error", "<i class='fa fa-times-circle toast-icon'></i>创建名片夹失败，请稍后重试");
                    }
                });
            });

            // 重命名名片夹
            $(".rename-folder").click(function(e) {
                e.preventDefault();
                e.stopPropagation();

                const folderId = $(this).data("id");
                const folderName = $(this).data("name");

                $("#renameFolderId").val(folderId);
                $("#newFolderName").val(folderName);
                $("#renameFolderModal").modal("show");
            });

            $("#submitRenameFolder").click(function() {
                const folderId = $("#renameFolderId").val();
                const folderName = $("#newFolderName").val().trim();

                if (!folderName) {
                    showToast("error", "<i class='fa fa-times-circle toast-icon'></i>请输入名片夹名称");
                    return;
                }

                $.ajax({
                    url: "/user/businesscard/folder/rename",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({
                        id: folderId,
                        folderName: folderName
                    }),
                    success: function(response) {
                        $("#renameFolderModal").modal("hide");
                        if (response.success) {
                            showToast("success", "<i class='fa fa-check-circle toast-icon'></i>重命名名片夹成功");
                            setTimeout(function() {
                                location.reload();
                            }, 1500);
                        } else {
                            showToast("error", "<i class='fa fa-times-circle toast-icon'></i>重命名名片夹失败：" + response.message);
                        }
                    },
                    error: function() {
                        $("#renameFolderModal").modal("hide");
                        showToast("error", "<i class='fa fa-times-circle toast-icon'></i>重命名名片夹失败，请稍后重试");
                    }
                });
            });

            // 删除名片夹
            $(".delete-folder").click(function(e) {
                e.preventDefault();
                e.stopPropagation();

                const folderId = $(this).data("id");
                const folderName = $(this).data("name");

                $("#deleteFolderName").text(folderName);
                $("#confirmDeleteFolder").data("id", folderId);
                $("#deleteFolderModal").modal("show");
            });

            $("#confirmDeleteFolder").click(function() {
                const folderId = $(this).data("id");

                $.ajax({
                    url: "/user/businesscard/folder/delete/" + folderId,
                    type: "POST",
                    success: function(response) {
                        $("#deleteFolderModal").modal("hide");
                        if (response.success) {
                            showToast("success", "<i class='fa fa-check-circle toast-icon'></i>删除名片夹成功");
                            setTimeout(function() {
                                location.reload();
                            }, 1500);
                        } else {
                            showToast("error", "<i class='fa fa-times-circle toast-icon'></i>删除名片夹失败：" + response.message);
                        }
                    },
                    error: function() {
                        $("#deleteFolderModal").modal("hide");
                        showToast("error", "<i class='fa fa-times-circle toast-icon'></i>删除名片夹失败，请稍后重试");
                    }
                });
            });

            // Toast消息提示函数
            function showToast(type, message) {
                const toastId = 'toast-' + Date.now();
                const toastClass = type === 'success' ? 'toast-success' : 'toast-error';

                const toast = $(`
                    <div class="toast ${toastClass}" id="${toastId}" role="alert" aria-live="assertive" aria-atomic="true" data-delay="3000">
                        <div class="toast-header">
                            <strong class="mr-auto">${type === 'success' ? '成功' : '错误'}</strong>
                            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="toast-body">
                            ${message}
                        </div>
                    </div>
                `);

                $(".toast-container").append(toast);
                $(`#${toastId}`).toast('show');

                // 自动移除已关闭的toast
                $(`#${toastId}`).on('hidden.bs.toast', function() {
                    $(this).remove();
                });
            }
        });
    </script>
</body>
</html>
